document.querySelectorAll('.right-contain-title-btn').forEach((element, index) => {
    element.addEventListener('click', function (e) {
        document.querySelectorAll('.right-contain-title-btn').forEach((e, i) => {
            e.style.backgroundColor = 'rgb(241, 248, 255)';
            e.style.color = 'black';
            document.querySelector(`.right-contain-main[data-id='${i}']`).style.display = 'none';
        });
        element.style.backgroundColor = 'rgb(46, 135, 255)';
        element.style.color = 'white';
        document.querySelector(`.right-contain-main[data-id='${index}']`).style.display = 'block';
        document.querySelector(`.right-contain-main[data-id='${index}']`).scrollTop = 0;
    });
});

document.querySelectorAll('.left-contain dl dt').forEach(element => {
    element.addEventListener('mouseover', function () {
        element.querySelector('img').src = `./imgas/${element.getAttribute('data-id')}-white.png`;
    });
    element.addEventListener('mouseout', function () {
        element.querySelector('img').src = `./imgas/${element.getAttribute('data-id')}-black.png`;
    });
});


if (JSON.parse(localStorage.getItem('login'))) {
    document.querySelector('.header-loginBtn').style.display = 'none'
    document.querySelector('.header-loginUser').innerHTML = JSON.parse(localStorage.getItem('login'))[0].username

}

let str = ''
for(let i=0;i<10;i++){
    str+=`<div></div>`
}
tong.innerHTML = str
dong.innerHTML=str